<template>
  <!-- #ifndef APP-NVUE -->
  <view class="not-nvue-safe-bottom" :style="[vueStyle, cusStyle]" :class="[cusClass]"></view>
  <!-- #endif -->
  <!-- #ifdef APP-NVUE -->
  <view :style="[nvueStyle, cusStyle]" :class="[cusClass]"></view>
  <!-- #endif -->
</template>

<script lang="ts" setup>
  import { type CSSProperties, type PropType, computed } from 'vue';
  import { publicStyeProps } from '../mxp-tool/utils/public-props';
  import type { $AllColorStr, $SizeUnitStr } from '../mxp-tool/types/interface';
  import { getXPNumber } from '../mxp-tool/utils/dom';
  import mxpGetSysInfoStore from '../mxp-tool/store/mxp-store-sys-info';
  defineOptions({
    name: 'mxp-safe-bottom',
  });

  const props = defineProps({
    /** 背景色 */
    background: { type: String as PropType<$AllColorStr>, default: 'transparent' },
    /** 其他高度 */
    restHeight: { type: String as PropType<$SizeUnitStr>, default: '0px' },
    ...publicStyeProps,
  });

  // #ifdef APP-NVUE
  const sys = mxpGetSysInfoStore().getSysInfo();
  const nvueStyle = computed<CSSProperties>(() => {
    return { height: `${getXPNumber(props.restHeight, 0) + (sys.value?.safeAreaInsets?.bottom || 0)}px`, backgroundColor: props.background };
  });
  // #endif

  // #ifndef APP-NVUE
  const vueStyle = computed<CSSProperties>(() => ({ height: props.restHeight }));
  // #endif
</script>

<style lang="scss" scoped>
  /* #ifndef APP-NVUE */
  .not-nvue-safe-bottom {
    box-sizing: content-box;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom); // stylelint-disable-line declaration-block-no-duplicate-properties
    padding-bottom: env(safe-area-inset-bottom); // stylelint-disable-line declaration-block-no-duplicate-properties
  }
  /* #endif */
</style>
